<script setup>
	import { useRouter } from 'vue-router';
	import { get, post } from '@/api/http/index';
	import { ref, reactive } from 'vue';
	import useBuriedPoint from '@/hooks/useBuriedPoint';

	import { useGlobalStore } from '@/stores';
	const { isOlderUI } = useGlobalStore();
	const router = useRouter();

	//useBuriedPoint();

	const dataList = ref([
		// {
		// 	zxId: 0,
		// 	url: 0,
		// 	title: 0,
		// },
	]);

	const parmas = {
		// type: '诗经湿地植物',
		pageNum: 1,
		pageSize: 99,
	};
	post('https://szsb.hzxh.gov.cn:8080/WxMini/CloudClass/getClassInfo', parmas).then((list) => {
		dataList.value = list
			.slice(0, 1)
			.map((e) => ({ ...e, title: '湿地与城市丨2023第十二届湿地主题绘画大赛征稿进行时' }));
	});
	const toDetail = ({ path }) => {
		// ZWJSBridge.openLink({
		// 	url: path,
		// })
		// 	.then((res) => {
		// 		console.log(res);
		// 	})
		// 	.catch((err) => {
		// 		console.log(err);
		// 	});
		router.push({
			// name: '科普详情',
			// params: { path },
			path: '/zxDetail',
			query: { path },
		});
	};
</script>

<template>
	<section class="min-h-full bg-page">
		<ul class="data-empty p-20px w-full box-border p-10px grid grid-cols-1 gap-25px">
			<li
				@click="toDetail(item)"
				v-for="item in dataList"
				:key="item.zxId"
			>
				<div class="w-full h-[calc((50vw-20px))] overflow-hidden">
					<img
						class="h-full w-full"
						:src="item.url"
						alt=""
					/>
					<!--  translate-x--50% -->
				</div>
				<p
					:class="isOlderUI ? 'text-18px' : 'text-14px'"
					class="van-ellipsis p-x-5px p-y-12px bg-white"
				>
					{{ item.title }}
				</p>
			</li>
		</ul>
	</section>
</template>

<style lang="less" scoped></style>
